<template>
	<view :style="$theme.pageStyle">
		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			title="问答专区">
			<view class="preview" slot="center">问答专区</view>
		</z-nav-bar>
		<view class="main-box" :style="{ paddingTop: TopHeight + 10 + 'px'}">
			<view class="detail-bar bg-ff">
				<view class="detail-question">
					<h1 class="tit u-line-2">{{Data.title}}</h1>
					<view class="mt-gap3">
						<!-- <view class="vm tag"><i class="ico-askdetail i-askd3 mr-gap"></i>婚姻家庭</view> -->
					</view>
					<view class="mt-gap3 info">
						<span class="fr"><span class="mr-gap" style="margin-right: 5px;">{{Data.view}}</span>浏览</span>
						<span class="mr-gap2">{{Data.user.nickname}}</span>
						<span class="mr-gap2">{{Data.add_time}}</span>
						<!-- <span>江西上饶</span> -->
					</view>
				</view>
				<view class="detail-answer">
					<view class="answer-tit">
						<i class="ico-askdetail i-askd2 mr-gap2"></i><span class="mr-gap2">律师解答</span>
						<span>共 {{Data.answer.length}} 条</span>
					</view>

					<block v-for="(item,index) in Data.answer" :key="index">
						<view class="answer-list">
							<view class="li" style="padding-left: 5px;">
								<view class="lawyer flex-row" @click="ToUrl('/pages/lawyer/info?id=' + item.lawyer.id)">
									<view class="photo img-block is-round">
										<image :src="item.lawyer.avatar" />
									</view>
									<view class="info flex-row">
										<view class="name">
											{{item.lawyer.real_name}}律师
										</view>
										<view class="tag">
											<span class="vm">服务{{item.lawyer_info.fuwu}}人</span>
											<i class="line-vertical"></i><span
												class="vm">执业{{item.lawyer_info.year}}年</span>
										</view>
									</view>
									<span class="ask">
										<uni-icons type="chatbubble"  size="12" :color="$theme.navBgColor"></uni-icons>
										咨询我
									</span>
	
								</view>
								<view class="unfold-bar mt-gap4">
									<view class="unfd-ovh">
										<view class="unfd-conts">
											<view class="detail">{{item.answer}}</view>
										</view>
									</view>
								</view>
								<view class="handle mt-gap3">
									<span>{{item.add_time}}</span>
								</view>
							</view>
						</view>
					</block>

					<view class="lvtu-ask-assistant mt-gap2 none">
						<view class="disc">
							<i class="ico-zsdet i-zsdet2 mr-gap2"></i>文章涵盖面广，如需要针对性解答，可立即咨询小助手
						</view>
						<view class="lawyer mt-gap3">
							<view class="flex-row">
								<view class="img-block photo">
									<image :src="app_logo" />
									<i class="vm dot"></i>
								</view>
								<view>
									<view class="f14 fb">咨询助手</view>
									<view class="f12 s-primary mt-gap2">24小时在线</view>
								</view>
							</view>
							<span class="ask" @click="ToUrl('/pages/index/ask')">立即咨询 &gt;</span>
						</view>
					</view>

					<view class="feadback-bar-v2 mt-gap4">
						<view class="txt-hide">
							<view class="txt">免责声明：以上内容解答仅供参考，不代表平台的观点和立场。若内容有误或侵权，请通过右侧【投诉/举报】联系我们更正或删除。</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 80px;"></view>

		<view class="bottom-bar">
			<view class="bottom-bar">
				<view class="bottom-shortcut-v2">
					<view class="item" @click="ToIndex()">
						<uni-icons type="home" size="28"></uni-icons>
						<p class="txt">首页</p>
					</view>
					<view class="item" @click="ToUrl('/pages/lawyer/index')">
						<uni-icons type="person" size="28"></uni-icons>
						<p class="txt">找律师</p>
					</view>
					<view class="b-r" @click="ToUrl('/pages/index/ask')">
						<view class="ask-btn">
							<span class="txt">立即咨询</span>
							<p class="disc fg">(最快9秒应答)</p>
							<view class="hot-tag"><b>99%</b>用户选择</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		data() {
			return {
				id: '',
				scrollTop: 0,
				Data: {},
				TopHeight: uni.getStorageSync('TopHeight'),
				app_logo: uni.getStorageSync('app_logo'),
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(opt) {
			this.id = opt.id
			this.GetData()
		},
		methods: {
			ToUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			ToIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			async GetData() {
				try {
					const res = await $H.post('index/askdetail', {
						id: this.id
					}, {
						token: true
					});

					this.Data = res.data

				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.main-box {
		padding: 2.2rem .5rem 0;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/541713103914e3y2RP.png') no-repeat center top;
		background-size: 100% auto;
		border-radius: 8px;
	}

	.bg-ff {
		background-color: #fff;
		border-radius: 8px;
	}

	.detail-bar .office-shenhe {
		height: 3rem;
		padding: .55rem 0 1.55rem 1.2rem;
		background: linear-gradient(360deg, #FCF4E8 0%, #FCFAF7 100%);
		display: flex;
		align-items: center;
		font-size: .6rem;
		color: #A89476;
		line-height: .9rem;
		display: none;
	}

	.detail-bar .office-shenhe image {
		width: 4.8rem;
		height: .7rem;
		margin-right: .3rem;
		position: relative;
		top: -0.05rem;
	}

	.detail-bar .office-shenhe .iconfont {
		font-size: .6rem;
	}

	/* detail-question */
	.detail-question {
		position: relative;
		z-index: 1;
		padding: 17px 17px 0;
		/*margin-top: -1rem;*/
		background-color: #fff;
		border-radius: 17px 17px 0 0;
	}

	.detail-question .tit {
		position: relative;
		font-size: 20px;
		line-height: 25px;
		max-height: 60px;
		overflow-y: auto;
		text-indent: 30px;
	}

	.detail-question .tit:before {
		content: '';
		position: absolute;
		top: 2px;
		left: 0;
		width: 20px;
		height: 20px;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/5317131045132gvU64.png') no-repeat;
		background-size: 100% 100%;
	}

	.mt-gap3 {
		margin-top: 15px
	}

	[class^="ico-"],
	.vm {
		display: inline-block;
		vertical-align: middle;
		margin-top: -0.1rem
	}

	.detail-question .tag {
		padding: 0 5px;
		line-height: 20px;
		border-radius: 4px;
		background-color: #F7F8FA;
		font-size: 14px;
		color: var(--color-primary);
	}

	.detail-question .tag:active {
		background-color: #EAEBED;
	}

	.detail-question .info {
		display: table;
		width: 100%;
		font-size: 12px;
		color: #868EA3;
	}

	.mr-gap2 {
		margin-right: 10px;
	}

	.mt-gap5 {
		margin-top: 15px;
	}

	.detail-question .entry {
		display: block;
		height: 57px;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/171713104537ifyH64.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 1.25rem 0 0 2.8rem;
		line-height: .9rem;
		font-size: .6rem;
		color: #111F34;
	}

	.detail-question .entry b {
		color: #0EB298;
	}

	.detail-question .entry .btn {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 4.6rem;
		height: 1.8rem;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		border-radius: .9rem .9rem .9rem 0;
		overflow: hidden;
	}

	.detail-question .entry .btn:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 3.6rem;
		height: 1.8rem;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/381713104558w9JiEl.png') no-repeat;
		background-size: 100% 100%;
		transform: translateX(-100%);
		animation: askToRight 2s ease infinite;
	}

	@keyframes askToRight {
		0% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		50% {
			-webkit-transform: translateX(4.6rem);
			transform: translateX(4.6rem);
		}

		100% {
			-webkit-transform: translateX(4.6rem);
			transform: translateX(4.6rem);
		}
	}


	/* detail-answer */
	.detail-answer {
		padding: 26px 10px 13px;
	}

	.detail-answer .answer-tit {
		font-size: 14px;
		color: #676F85;
		line-height: 25px;
	}

	.detail-answer .answer-tit .i-askd2 {
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/571713104577ZsdLET.png') no-repeat;
		background-size: 100% 100%;
	}

	.i-askd2 {
		width: 20px;
		height: 20px;
		background-position: -1rem 0;
	}

	.detail-answer .more-answer-all {
		margin-bottom: -.5rem;
		border-top: 0;
	}

	/* answer-list */
	.answer-list .li {
		padding-top: 1rem;
		padding-bottom: .8rem;
		padding-left: 2.2rem;
		border-bottom: 1px solid #F0F2F5;
		margin-bottom: 10px;
	}

	.answer-list .lawyer {
		position: relative;
		align-items: center;

	}

	.flex-row {
		display: flex;
	}

	.answer-list .lawyer .photo {
		width: 40px;
		height: 40px;
		margin-right: 8px;

		image {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}

	.answer-list .lawyer .ask {
		width: 4.7rem;
		height: 28px;
		line-height: 28px;
		border-radius: 1rem;
		text-align: center;
		background-color: #F7F8FA;
		color: var(--color-primary);
		font-size: 12px;
	}

	.answer-list .lawyer .info {
		flex: 1;
		flex-direction: column;
	}

	.line-vertical {
		display: inline-block;
		vertical-align: middle;
		height: .9em;
		margin: -.1rem .4rem 0;
		border-right: 1px solid #dfe2e8;
	}

	.unfold-bar {
		position: relative;
	}

	.mt-gap4 {
		margin-top: 15px;
	}

	.answer-list .lawyer .info .name {
		font-size: 14px;
		color: #414A5D;
	}

	.answer-list .lawyer .info .name span.ect {
		max-width: 4.9rem;
	}

	.answer-list .lawyer .info .tag {
		margin-top: .4rem;
		font-size: 12px;
		color: #868EA3;
	}

	.answer-list .lawyer .info .tag .ect {
		max-width: 2.4rem;
	}

	.answer-list .unfold-bar .unfd-ovh {}

	.answer-list .detail {
		line-height: 1.2rem;
	}

	.answer-list .detail a {
		padding-right: .8rem;
		color: #0b998f !important;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/161713104596xQtaCt.png') no-repeat right .2rem top;
		background-size: .5rem .5rem;
	}

	.answer-list .handle {
		line-height: 16px;
		overflow: hidden;
		font-size: 14px;
		color: #868EA3;
	}

	.answer-list .handle .praise {
		cursor: pointer;
		padding: 0 .4rem;
		margin-right: .4rem;
	}

	.answer-list .handle .praise.is-this {
		color: #FE5542;
	}

	.answer-list .handle .praise.is-this .i-pu-praise1 {
		background-position: -.95rem -2.2rem;
	}

	.answer-list .once-answer {
		background-color: #F7F8FA;
		padding: .6rem;
		border-radius: .2rem;
		font-size: .7rem;
		margin-bottom: .2rem;
	}

	.answer-list .once-answer dd {
		color: #414A5D;
		line-height: 1.1rem;
	}

	.answer-list .quality-answer {
		position: relative;
		z-index: 1;
		margin: 1rem -.4rem 0;
		padding-top: 2.4rem;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/431713104623tpYKNN.png') center top no-repeat;
		background-size: 100% auto;
		padding-right: .4rem;
		padding-left: 2.6rem;
		border-bottom: 0;
	}

	.answer-list .quality-answer:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		border: 1px solid #DCE6F5;
		border-radius: .4rem;
		z-index: -1;
	}

	.answer-list .quality-answer .lawyer .ask {
		background-color: #EDFCF5;
	}

	.answer-list .lawyer .ask:active {
		background-color: #EBECEE;
	}

	.answer-list .quality-answer .lawyer .ask:active {
		background-color: #E1F0E9;
	}

	.answer-list .unfold-bar .unfd-btn {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 1.2rem;
		line-height: 1.2rem;
		background-color: #fff;
		padding-right: 1.3rem;
		padding-left: .2rem;
		font-size: .7rem;
		color: #0B998F;
		cursor: pointer;
	}

	.answer-list .unfold-bar .unfd-btn:before {
		content: '';
		position: absolute;
		top: 0;
		left: -1.1rem;
		width: 1.2rem;
		height: 1.2rem;
		background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
	}

	.answer-list .unfold-bar .unfd-btn:after {
		content: '';
		position: absolute;
		top: .35rem;
		right: .6rem;
		width: .5rem;
		height: .5rem;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/051713104645pSwPhD.png') no-repeat;
		background-size: 100% 100%;
	}

	.lvtu-ask-assistant {
		display: block;
		height: 145px;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/331713106293jQWjwl.png') no-repeat;
		background-size: 100% 100%;
		padding: 13px 8px 8px
	}

	.lvtu-ask-assistant .disc .ico-tit {
		width: 2.5rem;
		height: .7rem;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/471713106367O0aLcY.png') center center/100% 100% no-repeat
	}

	.lvtu-ask-assistant .disc {
		padding: 0 5px;
		font-size: 14px;
		line-height: 20px;
		color: #414A5D;
	}

	.lvtu-ask-assistant .lawyer {
		background-color: #fff;
		border-radius: 8px;
		padding: .5rem .6rem;
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	.lvtu-ask-assistant .lawyer .ask {
		height: 1.6rem;
		line-height: 1.6rem;
		border-radius: .8rem;
		padding: 0 .6rem;
		background: var(--color-primary); 
		background: linear-gradient(270deg, var(--color-primary) 0, var(--color-primary-light-3) 100%);
		font-size: .7rem;
		color: #fff
	}

	.lvtu-ask-assistant .lawyer .photo {
		position: relative;
		width: 40px;
		height: 40px;
		margin-right: 10px
	}

	.fb {
		font-weight: 700;
	}

	.s-primary {
		color: var(--color-primary) !important;
	}
	


	.f12 {
		font-size: 12px;
	}

	.lvtu-ask-assistant .lawyer .photo image {
		width: 40px;
		height: 40px;
		border-radius: 50%
	}

	.lvtu-ask-assistant .lawyer .photo .dot {
		position: absolute;
		right: 0;
		bottom: .1rem;
		width: .4rem;
		height: .4rem;
		border-radius: 50%;
		border: 1px solid #fff;
		background-color:var(--color-primary)
	}
	
	

	.feadback-bar-v2 {
		position: relative;
		line-height: 15px;
		color: #868EA3;
		font-size: 12px
	}

	.feadback-bar-v2 .txt-hide {
		overflow: hidden;
		position: relative;
	}


	.bottom-bar {
		position: fixed;
		z-index: 100;
		bottom: 0px;
		width: 100%;
		height: 60px;
	}

	.bottom-bar .bg-shut {
		z-index: -1;
		bottom: 100%
	}

	.bottom-shortcut-v2 {
		background-color: #fff;
		box-shadow: 0 -0.2rem .6rem 0 rgba(0, 0, 0, 0.04);
		display: flex;
	}

	.bottom-shortcut-v2 .b-r {
		width: 70%;
		margin-left: .8rem
	}

	.bottom-shortcut-v2 .item {
		width: 55px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		// flex: 1;
		text-align: center
	}

	.bottom-shortcut-v2 .item .txt {
		font-size: 12px;
		color: #676F85;
	}

	.bottom-shortcut-v2 .ask-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		// width: 12.65rem;
		height: 60px;
		height: 60px;
		background: var(--color-primary);
		background: linear-gradient(270deg,var(--color-primary) 0,var(--color-primary-light-3) 100%);
		text-align: center;
		color: #fff;
		font-size: 18px;
		position: relative
	}

	.bottom-shortcut-v2 .ask-btn:active {
		background: var(--color-primary)
	}

	.bottom-shortcut-v2 .ask-btn .disc {
		display: inline;
		font-size: 12px;
		margin-left: 5px;
	}

	.bottom-shortcut-v2 .ask-btn .hot-tag {
		position: absolute;
		top: -0.6rem;
		right: 25px;
		background: linear-gradient(270deg, #FE6E51 0, #F54640 100%);
		border-radius: .55rem .55rem .55rem .1rem;
		color: #fff;
		box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.08);
		padding: 0 .4rem;
		font-size: .6rem;
		white-space: nowrap;
		line-height: 1rem;
	}
</style>